<template>
  <div class="config_eth_oam_state">
    <div style="background-color: #FFFFFF;position: absolute;left: 278px;top: 347px;padding: 0px 10px">
      <p style="font-size: 18px"><b>ETH OAM STATE</b></p>
    </div>

    <div style="width: 680px;margin-top: 50px;">
      <el-form :model="ethOAMState['oam-state-pac']" ref="ruleForm" label-width="70px" class="config_form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="丢包率" prop="tm-state">
              <el-select v-model="ethOAMState['oam-state-pac']['tm-state']" placeholder="请选择">
                <el-option label="使能" value="true"></el-option>
                <el-option label="禁止" value="false"></el-option>
              </el-select>
              <!--              <el-switch-->
              <!--                  v-model="ethOAMState['oam-state-pac']['lm-state']"-->
              <!--                  active-color="#13ce66"-->
              <!--                  inactive-color="#ff4949">-->
              <!--              </el-switch>-->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接发流量" prop="lm-state">
              <el-select v-model="ethOAMState['oam-state-pac']['lm-state']" placeholder="请选择">
                <el-option label="使能" value="true"></el-option>
                <el-option label="禁止" value="false"></el-option>
              </el-select>
              <!--              <el-switch-->
              <!--                  v-model="ethOAMState['oam-state-pac']['tm-state']"-->
              <!--                  active-color="#13ce66"-->
              <!--                  inactive-color="#ff4949">-->
              <!--              </el-switch>-->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="双向时延" prop="dm-state">
              <el-select v-model="ethOAMState['oam-state-pac']['dm-state']" placeholder="请选择">
                <el-option label="使能" value="true"></el-option>
                <el-option label="禁止" value="false"></el-option>
              </el-select>
              <!--              <el-switch-->
              <!--                  v-model="ethOAMState['oam-state-pac']['dm-state']"-->
              <!--                  active-color="#13ce66"-->
              <!--                  inactive-color="#ff4949">-->
              <!--              </el-switch>-->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="连通性" prop="cc-state">
              <el-select v-model="ethOAMState['oam-state-pac']['cc-state']" placeholder="请选择">
                <el-option label="使能" value="true"></el-option>
                <el-option label="禁止" value="false"></el-option>
              </el-select>
              <!--              <el-switch-->
              <!--                  v-model="ethOAMState['oam-state-pac']['cc-state']"-->
              <!--                  active-color="#13ce66"-->
              <!--                  inactive-color="#ff4949">-->
              <!--              </el-switch>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="150px">
        <el-form-item label="连通性监测运行状态" prop="ccState">
          <el-input
              v-model="ethOAMState['oam-state-pac'].ccState"
              readonly>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <!--    <el-header class="header_oam">ETH OAM STATE & 性能</el-header>-->
    <div v-show="false">
      <el-row>
        <el-col :span="6">
          <div style="width: 200px;margin-top: 50px;">
            <el-form :model="ethOAMState['oam-state-pac']" ref="ruleForm" label-width="100px" class="config_form">
              <el-form-item label="接发流量测量" prop="lm-state">
                <el-switch
                    v-model="ethOAMState['oam-state-pac']['lm-state']"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>

              <el-form-item label="丢包率测量" prop="tm-state">
                <el-switch
                    v-model="ethOAMState['oam-state-pac']['tm-state']"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>

              <el-form-item label="双向时延测量" prop="dm-state">
                <el-switch
                    v-model="ethOAMState['oam-state-pac']['dm-state']"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>

              <el-form-item label="连通性监测" prop="cc-state">
                <el-switch
                    v-model="ethOAMState['oam-state-pac']['cc-state']"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>

            </el-form>
          </div>
        </el-col>
        <el-col :span="18">
          <!--性能-->
          <div style="margin-left: 10px;margin-bottom: 5px;float: left">
            <el-descriptions
                title="以太网性能"
                :column="1"
                border
                style="width: 400px"
            >
              <el-descriptions-item>
                <template slot="label">
                  双向时延
                </template>
                {{ performance.delay }}
                <i>us</i>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i></i>
                  近端测量到的丢包率
                </template>
                {{ performance.nearPacketLossRate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i></i>
                  远端测量到的丢包率
                </template>
                {{ performance.farPacketLossRate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i></i>
                  发送的流量字节数
                </template>
                {{ performance.txBytes }}
                <i>byte</i>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i></i>
                  接收的流量字节数
                </template>
                {{ performance.rxBytes }}
                <i>byte</i>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
        title="创建网元"
        :visible.sync="visiblePerformance"
        width="400px"
        :close-on-click-modal="false"
        append-to-body>
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">以太网性能</div>
      </div>
      <EthPerformance/>
    </el-dialog>
    <el-form>
      <el-form-item>
        <div style="float: right;margin-right: 10px">
          <el-image
              style="width: 20px; height: 25px;"
              :src="require('@/assets/union_rule_font.jpg')"
              :preview-src-list="[require('@/assets/union/ethOamState.jpg')]">
          </el-image>

          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import EthPerformance from "@/components/dispose/ctp/eth/EthPerformance";

export default {
  name: "EthOAMState",
  components: {EthPerformance},
  data() {
    return {
      visiblePerformance: false,
      MeasureEnable: ['TRUE', 'FALSE', 'NULL'],
      ethOAMState: {
        "oam-state-pac": {
          "dm-state": '',
          "tm-state": '',
          "lm-state": '',
          "cc-state": '',
          ccState: ''

        }
      },
      //性能
      performance: {
        delay: 0,
        nearPacketLossRate: 0,
        farPacketLossRate: 0,
        txBytes: 0,
        rxBytes: 0,
      }

    }

  },
  methods: {
    submitForm(formName) {
      this.visiblePerformance = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.$bus.$on('close:view', (data) => {
      this.visiblePerformance = data;
    })
  }
}
</script>

<style scoped>
.config_eth_oam_state {
  /*padding-right: 5px;*/
  margin-left: 50px;
  width: 700px;
  height: auto;
  float: left;
  border: #a8a7a7 2px solid;
  border-radius: 20px;
  margin-top: 50px;
}
</style>